<template>

  <div>
    <countTo  :suffix='setSuffix'  :prefix='setPrefix' :startVal='startVal' :endVal='endVal' :duration='3000' class="example"></countTo>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import { getCount } from '@/api/data'

export default {
  name: 'CountToDemo',
  components: { countTo },
  data() {
    return {
      startVal: 0,
      endVal: 0,
      setPrefix: '当前数据库总数据条数:',
      timerId: 1, // 模拟计时器id，唯一性
      timerObj: {}, // 计时器存储器
      setSuffix: ' 条'
    }
  },
  created() {
    this.startTraining()
  },
  computed: {
    _startVal() {
      if (this.setStartVal) {
        return this.setStartVal
      } else {
        return 0
      }
    },
    _endVal() {
      if (this.setEndVal) {
        return this.setEndVal
      } else {
        return 0
      }
    },
    _duration() {
      if (this.setDuration) {
        return this.setDuration
      } else {
        return 100
      }
    },
    _decimals() {
      if (this.setDecimals) {
        if (this.setDecimals < 0 || this.setDecimals > 20) {
          alert('digits argument must be between 0 and 20')
          return 0
        }
        return this.setDecimals
      } else {
        return 0
      }
    },
    _separator() {
      return this.setSeparator
    },
    _suffix() {
      return this.setSuffix
    },
    _prefix() {
      return this.setPrefix
    }
  },
  methods: {
    start() {
      this.$refs.example.start()
    },
    /* pauseResume() {
      this.$refs.example.pauseResume()
    }*/
    /*
     * 开始轮训
     * */
    startTraining() {
      /**
      *获取当前条数
      * */
      getCount().then(response => {
        console.log(response.data)
        this.endVal = response.data
      })

      const this_ = this
      const id = this.timerId++
      this.timerObj[id] = true

      async function timerFn() {
        if (!this_.timerObj[id]) return
        await this_.getData()
        setTimeout(timerFn, 45 * 1000)
      }
      timerFn()
    },

    /*
    * 停止轮训
    * */
    stopTime() {
      this.timerObj = {}
    },

    /*
    * 要轮训的代码
    * */
    getData() {
      this.log += 1
      console.log('this.log:' + this.log)
      /**
       *获取当前条数
       * */
      getCount().then(response => {
        console.log(response.data)
        this.startVal = this.endVal
        this.endVal = response.data
      })
    }
  },
  destroyed() {
    this.stopTime()
  }

}
</script>

<style scoped>
  .example-btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 500;
    text-align: center;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
    padding: 4px 15px;
    font-size: 12px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    position: relative;
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
    border-color: #d9d9d9;
  }

  .example-btn:hover {
    color: #4AB7BD;
    background-color: #fff;
    border-color: #4AB7BD;
  }
  .example {
    font-size: 50px;
    color: #F6416C;
    display: block;
    margin: 10px 0;
    text-align: center;
    font-size: 60px;
    font-weight: 500;
  }

  .label {
    color: #2f4f4f;
    font-size: 16px;
    display: inline-block;
    margin: 15px 30px 15px 0;
  }

  input {
    position: relative;
    display: inline-block;
    padding: 4px 7px;
    width: 70px;
    height: 28px;
    cursor: text;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  .startBtn {
    margin-left: 20px;
    font-size: 20px;
    color: #30B08F;
    background-color: #fff;
  }

  .startBtn:hover {
    background-color: #30B08F;
    color: #fff;
    border-color: #30B08F;
  }

  .pause-resume-btn {
    font-size: 20px;
    color: #E65D6E;
    background-color: #fff;
  }

  .pause-resume-btn:hover {
    background-color: #E65D6E;
    color: #fff;
    border-color: #E65D6E;
  }
</style>



